<template>
  <div class="add-address flex-a" @click="jumpTo">
    <div class="address flex-a flex-b" v-if="addrInfo.length > 0" @click="jumpTo">
      <div class="left">
        <div class="name flex-a"><span>{{ addrInfo[0].userName }}</span><span>{{ addrInfo[0].userPhone }}</span></div>
        <div class="addr">{{ addrInfo[0].provinceName + addrInfo[0].cityName + addrInfo[0].regionName +
          addrInfo[0].detailAddress }}</div>
      </div>
      <div>
        <Right color="#333333" size="15px" />
      </div>
    </div>
    <div v-else class="flex-a">
      <Uploader color="#333333" size="15px" />
      <div class="add-icon">添加收货地址</div>
    </div>
  </div>
</template>
  
<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Uploader, Right } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getAddressList } from '../../../../api/index'
export default {
  components: {
    Uploader,
    Right
  },
  setup() {
    const state = reactive({
      id: '',
      addrInfo: [],
      cartItemIds: [] as any
    });
    onMounted(() => {
      const router = useRouter();
      if (router.params.addressId) {
        state.id = router.params.addressId
        getAddressList().then(response => {
          if (response.resultCode == 200) {
            let list = response.data
            state.addrInfo = list.filter(item => item.addressId == router.params.addressId)
          }
        })
      }
      if (router.params.cartItemIds) {
        state.cartItemIds = router.params.cartItemIds
      }
    });
    const jumpTo = () => {
      Taro.navigateTo({ url: '/packageA/pages/addressList/index?cartItemIds=' + state.cartItemIds });
    }
    return { ...toRefs(state), jumpTo };
  }
};
</script>
<style lang="scss" >
.add-address {
  border-top: 1rpx solid #E9E9E9;
  border-bottom: 1rpx solid #E9E9E9;
  padding: 30rpx 10rpx 30rpx 30rpx;

  div.add-icon {
    margin-left: 10rpx;
  }

  .address {
    white-space: nowrap;

    .left {
      width: 600rpx;
    }

    .name {
      span:first-child {
        color: #212121;
        font-size: 34rpx;
      }

      span:last-child {
        color: #808080;
        font-size: 28rpx;
      }
    }

    .addr {
      font-size: 34rpx;
    }
  }
}
</style>